<template>
  <div class="ranking-container">
    <!-- 英雄区域 -->
    <div class="hero-section">
      <div class="hero-background"></div>
      <div class="hero-content">
        <div class="hero-title">
          <FireOutlined class="hero-icon" />
          <h1>🔥 图片热度排行</h1>
        </div>
        <p class="hero-subtitle">发现最受欢迎的视觉内容，追踪热门趋势</p>

        <!-- 快速筛选 -->
        <div class="hero-filters">
          <a-radio-group
            v-model:value="rankingType"
            @change="handleRankingTypeChange"
            class="ranking-type-selector"
          >
            <a-radio-button value="total">🏆 总榜</a-radio-button>
            <a-radio-button value="daily">📅 日榜</a-radio-button>
            <a-radio-button value="weekly">📊 周榜</a-radio-button>
            <a-radio-button value="monthly">📈 月榜</a-radio-button>
          </a-radio-group>
        </div>
      </div>
    </div>

    <!-- 置顶前三名 -->
    <div class="top-three-section" v-if="topThreeList.length > 0">
      <div class="section-title">
        <CrownOutlined class="section-icon" />
        <span>榜首三甲</span>
      </div>
      <div class="podium">
        <!-- 第二名 -->
        <div
          class="podium-item second"
          v-if="topThreeList[1]"
          @click="showImageDetails(topThreeList[1])"
        >
          <div class="podium-rank">
            <div class="rank-badge silver">2</div>
          </div>
          <div class="podium-image">
            <img
              :src="IMAGE_PREFIX + (topThreeList[1].thumbnailUrl || '')"
              :alt="topThreeList[1].name"
              @error="handleImageError"
            />
            <div class="image-overlay">
              <EyeOutlined />
            </div>
          </div>
          <div class="podium-info">
            <h3>{{ topThreeList[1].name }}</h3>
            <div class="podium-stats">
              <span><HeartFilled /> {{ formatCount(topThreeList[1].likeCount) }}</span>
              <span><EyeOutlined /> {{ formatCount(topThreeList[1].viewCount || 0) }}</span>
            </div>
          </div>
        </div>

        <!-- 第一名（中央最高） -->
        <div
          class="podium-item first"
          v-if="topThreeList[0]"
          @click="showImageDetails(topThreeList[0])"
        >
          <div class="podium-rank">
            <div class="rank-badge gold">
              <CrownOutlined class="crown" />
            </div>
          </div>
          <div class="podium-image champion">
            <img
              :src="IMAGE_PREFIX + (topThreeList[0].thumbnailUrl || '')"
              :alt="topThreeList[0].name"
              @error="handleImageError"
            />
            <div class="image-overlay">
              <EyeOutlined />
            </div>
            <div class="champion-glow"></div>
          </div>
          <div class="podium-info">
            <h3>{{ topThreeList[0].name }}</h3>
            <div class="podium-stats">
              <span><HeartFilled /> {{ formatCount(topThreeList[0].likeCount) }}</span>
              <span><EyeOutlined /> {{ formatCount(topThreeList[0].viewCount || 0) }}</span>
            </div>
          </div>
        </div>

        <!-- 第三名 -->
        <div
          class="podium-item third"
          v-if="topThreeList[2]"
          @click="showImageDetails(topThreeList[2])"
        >
          <div class="podium-rank">
            <div class="rank-badge bronze">3</div>
          </div>
          <div class="podium-image">
            <img
              :src="IMAGE_PREFIX + (topThreeList[2].thumbnailUrl || '')"
              :alt="topThreeList[2].name"
              @error="handleImageError"
            />
            <div class="image-overlay">
              <EyeOutlined />
            </div>
          </div>
          <div class="podium-info">
            <h3>{{ topThreeList[2].name }}</h3>
            <div class="podium-stats">
              <span><HeartFilled /> {{ formatCount(topThreeList[2].likeCount) }}</span>
              <span><EyeOutlined /> {{ formatCount(topThreeList[2].viewCount || 0) }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 筛选与视图控制 -->
    <div class="filter-control-section">
      <div class="filter-left">
        <a-select
          v-model:value="selectedCategory"
          placeholder="🏷️ 选择分类"
          class="category-select"
          allowClear
          @change="handleCategoryChange"
        >
          <a-select-option value="">全部分类</a-select-option>
          <a-select-option v-for="category in categories" :key="category" :value="category">
            {{ category }}
          </a-select-option>
        </a-select>

        <a-select v-model:value="displayLimit" class="limit-select" @change="handleLimitChange">
          <a-select-option :value="10">前 10 名</a-select-option>
          <a-select-option :value="20">前 20 名</a-select-option>
          <a-select-option :value="50">前 50 名</a-select-option>
          <a-select-option :value="100">前 100 名</a-select-option>
        </a-select>
      </div>

      <div class="filter-right">
        <a-radio-group v-model:value="viewMode" class="view-mode-selector">
          <a-radio-button value="grid"> <AppstoreOutlined /> 网格 </a-radio-button>
          <a-radio-button value="list"> <BarsOutlined /> 列表 </a-radio-button>
        </a-radio-group>
      </div>
    </div>

    <!-- 排行榜内容 -->
    <div class="ranking-content">
      <a-spin :spinning="loading" tip="正在加载热门图片...">
        <!-- 网格视图 -->
        <div v-if="viewMode === 'grid'" class="grid-view">
          <div
            v-for="(item, index) in remainingList"
            :key="item.id"
            class="grid-item"
            @click="showImageDetails(item)"
          >
            <div class="grid-card">
              <div class="card-rank">
                {{ index + 4 }}
              </div>
              <div class="card-image">
                <img
                  :src="IMAGE_PREFIX + (item.thumbnailUrl || '')"
                  :alt="item.name"
                  @error="handleImageError"
                />
                <div class="card-overlay">
                  <div class="overlay-actions">
                    <a-button type="text" @click.stop="handleLike(item)" class="overlay-btn">
                      <HeartFilled v-if="item.liked" style="color: #ff4757" />
                      <HeartOutlined v-else />
                    </a-button>
                    <a-button type="text" @click.stop="handleFavorite(item)" class="overlay-btn">
                      <StarFilled v-if="item.favorited" style="color: #ffa502" />
                      <StarOutlined v-else />
                    </a-button>
                    <a-button type="text" @click.stop="handleDownload(item)" class="overlay-btn">
                      <DownloadOutlined />
                    </a-button>
                  </div>
                </div>
              </div>
              <div class="card-info">
                <h4 class="card-title">{{ item.name }}</h4>
                <div class="card-stats">
                  <span><HeartOutlined /> {{ formatCount(item.likeCount) }}</span>
                  <span><EyeOutlined /> {{ formatCount(item.viewCount || 0) }}</span>
                </div>
                <div class="card-tags">
                  <a-tag
                    v-for="tag in item.tags ? JSON.parse(item.tags).slice(0, 2) : []"
                    :key="tag"
                    size="small"
                  >
                    {{ tag }}
                  </a-tag>
                </div>
              </div>
            </div>
          </div>
        </div>

        <!-- 列表视图 -->
        <div v-else class="list-view">
          <div
            v-for="(item, index) in remainingList"
            :key="item.id"
            class="list-item"
            @click="showImageDetails(item)"
          >
            <div class="list-rank">
              <span class="rank-number">{{ index + 4 }}</span>
            </div>
            <div class="list-image">
              <img
                :src="IMAGE_PREFIX + (item.thumbnailUrl || '')"
                :alt="item.name"
                @error="handleImageError"
              />
            </div>
            <div class="list-info">
              <h4 class="list-title">{{ item.name }}</h4>
              <div class="list-meta">
                <span class="category">{{ item.category }}</span>
                <div class="list-tags">
                  <a-tag
                    v-for="tag in item.tags ? JSON.parse(item.tags).slice(0, 3) : []"
                    :key="tag"
                    size="small"
                  >
                    {{ tag }}
                  </a-tag>
                </div>
              </div>
            </div>
            <div class="list-stats">
              <div class="stat-item">
                <HeartOutlined />
                <span>{{ formatCount(item.likeCount) }}</span>
              </div>
              <div class="stat-item">
                <StarOutlined />
                <span>{{ formatCount(item.favoriteCount) }}</span>
              </div>
              <div class="stat-item">
                <EyeOutlined />
                <span>{{ formatCount(item.viewCount || 0) }}</span>
              </div>
              <div class="stat-item">
                <DownloadOutlined />
                <span>{{ formatCount(item.downloadCount || 0) }}</span>
              </div>
            </div>
            <div class="list-actions">
              <a-button type="text" @click.stop="handleLike(item)" :class="{ liked: item.liked }">
                <HeartFilled v-if="item.liked" style="color: #ff4757" />
                <HeartOutlined v-else />
              </a-button>
              <a-button
                type="text"
                @click.stop="handleFavorite(item)"
                :class="{ favorited: item.favorited }"
              >
                <StarFilled v-if="item.favorited" style="color: #ffa502" />
                <StarOutlined v-else />
              </a-button>
              <a-button type="text" @click.stop="handleDownload(item)">
                <DownloadOutlined />
              </a-button>
            </div>
          </div>
        </div>

        <!-- 空状态 -->
        <div v-if="!loading && rankingList.length === 0" class="empty-state">
          <div class="empty-illustration">
            <FireOutlined />
          </div>
          <h3>暂无热门图片</h3>
          <p>还没有图片上榜，快去上传优质内容吧！</p>
        </div>

        <!-- 分页 -->
        <div class="pagination-wrapper" v-if="total > pageSize">
          <a-pagination
            v-model:current="currentPage"
            v-model:pageSize="pageSize"
            :total="total"
            :show-size-changer="false"
            :show-quick-jumper="true"
            :show-total="(total, range) => `共 ${total} 项`"
            @change="handlePageChange"
            class="modern-pagination"
          />
        </div>
      </a-spin>
    </div>

    <!-- 图片详情模态框 -->
    <PreviewModal
      v-model:visible="previewVisible"
      :image="selectedImage"
      @like="handleLike"
      @favorite="handleFavorite"
      @download="handleDownload"
    />
  </div>
</template>

<script setup lang="ts">
  import { ref, onMounted, computed } from 'vue'
  import { message } from 'ant-design-vue'
  import {
    FireOutlined,
    CrownOutlined,
    HeartOutlined,
    HeartFilled,
    StarOutlined,
    StarFilled,
    EyeOutlined,
    DownloadOutlined,
    AppstoreOutlined,
    BarsOutlined,
  } from '@ant-design/icons-vue'
  import {
    getPictureRankingUsingGet,
    getCategoriesUsingGet1,
    likePictureUsingPost1,
    cancelLikePictureUsingPost1,
    batchAddFavoriteUsingPost1,
    batchCancelFavoriteUsingPost1,
    downloadImageUsingGet1,
    recordUserBehaviorUsingPost,
  } from '@/api/tupianguanlijiekou'
  import { useLoginUserStore } from '@/stores/useLoginUserStore'
  import PreviewModal from '@/components/PreviewModal.vue'

  // 常量
  const IMAGE_PREFIX = import.meta.env.VITE_API_BASE_URL + '/api/file/'

  // 状态管理
  const loginUserStore = useLoginUserStore()

  // 响应式数据
  const loading = ref(false)
  const rankingList = ref<any[]>([])
  const categories = ref<string[]>([])
  const currentPage = ref(1)
  const pageSize = ref(20)
  const total = ref(0)

  // 筛选参数
  const rankingType = ref<'total' | 'daily' | 'weekly' | 'monthly'>('total')
  const selectedCategory = ref<string>('')
  const displayLimit = ref(20)

  // 视图模式：grid | list
  const viewMode = ref<'grid' | 'list'>('grid')

  // 置顶前三
  const topThreeList = computed(() => rankingList.value.slice(0, 3))
  // 剩余列表
  const remainingList = computed(() => rankingList.value.slice(3))

  // 预览相关
  const previewVisible = ref(false)
  const selectedImage = ref<any>(null)

  // 获取分类列表
  const fetchCategories = async () => {
    try {
      const res = await getCategoriesUsingGet1()
      if (res.data.code === 200) {
        categories.value = res.data.data || []
      }
    } catch (error) {
      console.error('获取分类失败:', error)
    }
  }

  // 获取排行榜数据
  const fetchRankingData = async () => {
    loading.value = true
    try {
      const params = {
        type: rankingType.value,
        category: selectedCategory.value,
        limit: displayLimit.value,
        page: currentPage.value,
        pageSize: pageSize.value,
      }

      const res = await getPictureRankingUsingGet(params)
      if (res.data.code === 200) {
        rankingList.value = res.data.data?.records || []
        total.value = res.data.data?.total || 0
      } else {
        message.error(res.data.message || '获取排行榜失败')
      }
    } catch (error) {
      console.error('获取排行榜失败:', error)
      message.error('获取排行榜失败')
    } finally {
      loading.value = false
    }
  }

  // 事件处理
  const handleRankingTypeChange = () => {
    currentPage.value = 1
    fetchRankingData()
  }

  const handleCategoryChange = () => {
    currentPage.value = 1
    fetchRankingData()
  }

  const handleLimitChange = () => {
    currentPage.value = 1
    fetchRankingData()
  }

  const handlePageChange = (page: number) => {
    currentPage.value = page
    fetchRankingData()
  }

  // 图片操作
  const handleLike = async (item: any) => {
    if (!loginUserStore.loginUser?.id) {
      message.warning('请先登录')
      return
    }

    try {
      if (item.liked) {
        await cancelLikePictureUsingPost1(item.id)
        item.liked = false
        item.likeCount = Math.max(0, (item.likeCount || 1) - 1)
        message.success('取消点赞成功')
      } else {
        await likePictureUsingPost1(item.id)
        item.liked = true
        item.likeCount = (item.likeCount || 0) + 1
        message.success('点赞成功')
      }

      // 记录用户行为
      await recordUserBehaviorUsingPost({
        pictureId: item.id,
        userId: loginUserStore.loginUser.id,
        behaviorType: item.liked ? 'like' : 'view',
      })
    } catch (error) {
      console.error('操作失败:', error)
      message.error('操作失败')
    }
  }

  const handleFavorite = async (item: any) => {
    if (!loginUserStore.loginUser?.id) {
      message.warning('请先登录')
      return
    }

    try {
      if (item.favorited) {
        await batchCancelFavoriteUsingPost1(item.id)
        item.favorited = false
        item.favoriteCount = Math.max(0, (item.favoriteCount || 1) - 1)
        message.success('取消收藏成功')
      } else {
        await batchAddFavoriteUsingPost1(item.id)
        item.favorited = true
        item.favoriteCount = (item.favoriteCount || 0) + 1
        message.success('收藏成功')
      }

      // 记录用户行为
      await recordUserBehaviorUsingPost({
        pictureId: item.id,
        userId: loginUserStore.loginUser.id,
        behaviorType: item.favorited ? 'favorite' : 'view',
      })
    } catch (error) {
      console.error('操作失败:', error)
      message.error('操作失败')
    }
  }

  const handleDownload = async (item: any) => {
    try {
      await downloadImageUsingGet1({ pictureId: item.id })
      message.success('下载成功')

      // 记录下载行为
      if (loginUserStore.loginUser?.id) {
        await recordUserBehaviorUsingPost({
          pictureId: item.id,
          userId: loginUserStore.loginUser.id,
          behaviorType: 'download',
        })
      }
    } catch (error) {
      console.error('下载失败:', error)
      message.error('下载失败')
    }
  }

  const showImageDetails = (item: any) => {
    selectedImage.value = item
    previewVisible.value = true

    // 记录浏览行为
    if (loginUserStore.loginUser?.id) {
      recordUserBehaviorUsingPost({
        pictureId: item.id,
        userId: loginUserStore.loginUser.id,
        behaviorType: 'view',
      })
    }
  }

  const handleImageError = (event: Event) => {
    const img = event.target as HTMLImageElement
    img.src = '/src/assets/default_avatar.png'
  }

  // 工具函数
  const formatCount = (count: number) => {
    if (!count) return '0'
    if (count >= 10000) {
      return (count / 10000).toFixed(1) + 'w'
    }
    return count.toString()
  }

  // 生命周期
  onMounted(() => {
    fetchCategories()
    fetchRankingData()
  })
</script>

<style scoped>
  .ranking-container {
    padding: 0 24px 24px;
    background: #0b1220;
    min-height: 100vh;
  }

  /******************* 英雄区 *******************/
  .hero-section {
    position: relative;
    height: 220px;
    border-radius: 16px;
    overflow: hidden;
    margin: 16px 0 24px;
    background: linear-gradient(135deg, #1f2a44 0%, #101826 100%);
  }
  .hero-background {
    position: absolute;
    inset: 0;
    background-image:
      radial-gradient(ellipse at top left, rgba(24, 144, 255, 0.25), transparent 50%),
      radial-gradient(ellipse at bottom right, rgba(250, 173, 20, 0.2), transparent 50%);
    filter: blur(40px);
  }
  .hero-content {
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #e6f7ff;
    text-align: center;
    z-index: 1;
  }
  .hero-title {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .hero-title h1 {
    margin: 0;
    font-size: 28px;
    letter-spacing: 1px;
  }
  .hero-icon {
    font-size: 36px;
    color: #ff9f43;
  }
  .hero-subtitle {
    margin-top: 6px;
    color: #b7c4d9;
  }
  .hero-filters {
    margin-top: 16px;
  }
  .ranking-type-selector :deep(.ant-radio-button-checked) {
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
  }

  /******************* 三甲区 *******************/
  .top-three-section {
    background: #0f172a;
    border-radius: 12px;
    padding: 16px 16px 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
  }
  .section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #e6fffb;
    margin-bottom: 12px;
  }
  .section-icon {
    color: #ffd666;
  }
  .podium {
    display: grid;
    grid-template-columns: 1.1fr 1.3fr 1.1fr;
    gap: 12px;
  }
  .podium-item {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px;
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
    cursor: pointer;
  }
  .podium-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  }
  .podium-image {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    height: 180px;
  }
  .podium-image.champion {
    height: 200px;
  }
  .podium-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .podium-info {
    margin-top: 10px;
    color: #d6e4ff;
  }
  .podium-info h3 {
    margin: 0 0 4px;
    font-weight: 600;
    font-size: 14px;
    color: #e6f7ff;
  }
  .podium-stats {
    display: flex;
    gap: 12px;
    color: #a6adbb;
    font-size: 12px;
  }
  .rank-badge {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
  }
  .rank-badge.gold {
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #8b6914;
  }
  .rank-badge.silver {
    background: linear-gradient(135deg, #c0c0c0, #e8e8e8);
    color: #666;
  }
  .rank-badge.bronze {
    background: linear-gradient(135deg, #cd7f32, #daa520);
    color: #8b4513;
  }
  .crown {
    font-size: 20px;
  }
  .champion-glow {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 80px rgba(255, 215, 0, 0.18);
    pointer-events: none;
  }
  .image-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: opacity 0.2s;
  }
  .podium-image:hover .image-overlay {
    opacity: 1;
  }

  /******************* 过滤与视图控制 *******************/
  .filter-control-section {
    margin-top: 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .filter-left {
    display: flex;
    gap: 12px;
  }
  .category-select,
  .limit-select {
    width: 200px;
  }
  .view-mode-selector {
    background: #0f172a;
    padding: 4px;
    border-radius: 8px;
  }

  /******************* 内容区 *******************/
  .ranking-content {
    background: #0f172a;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
  }

  /* 网格视图 */
  .grid-view {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
    padding: 16px;
  }
  .grid-item {
  }
  .grid-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    overflow: hidden;
    transition:
      transform 0.2s,
      box-shadow 0.2s;
    position: relative;
  }
  .grid-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.35);
  }
  .card-rank {
    position: absolute;
    left: 12px;
    top: 12px;
    background: rgba(0, 0, 0, 0.45);
    color: #fff;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 12px;
    backdrop-filter: blur(4px);
  }
  .card-image {
    position: relative;
    height: 180px;
  }
  .card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .card-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.2s;
    background: rgba(0, 0, 0, 0.35);
  }
  .grid-card:hover .card-overlay {
    opacity: 1;
  }
  .overlay-btn {
    color: #e6f7ff;
  }
  .card-info {
    padding: 12px;
    color: #d6e4ff;
  }
  .card-title {
    margin: 0 0 6px;
    font-size: 14px;
    color: #e6f7ff;
  }
  .card-stats {
    display: flex;
    gap: 16px;
    color: #a6adbb;
    font-size: 12px;
  }
  .card-tags {
    margin-top: 6px;
  }

  /* 列表视图 */
  .list-view {
    display: flex;
    flex-direction: column;
    padding: 8px 12px;
  }
  .list-item {
    display: grid;
    grid-template-columns: 64px 160px 1fr 320px 140px;
    gap: 12px;
    align-items: center;
    padding: 10px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    color: #d6e4ff;
  }
  .list-item:hover {
    background: rgba(255, 255, 255, 0.02);
  }
  .list-rank .rank-number {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    font-weight: 700;
  }
  .list-image img {
    width: 100%;
    height: 88px;
    object-fit: cover;
    border-radius: 10px;
  }
  .list-title {
    margin: 0 0 6px;
    color: #e6f7ff;
  }
  .list-meta {
    display: flex;
    gap: 10px;
    align-items: center;
  }
  .list-tags {
    display: flex;
    gap: 6px;
  }
  .list-stats {
    display: flex;
    gap: 16px;
    color: #a6adbb;
  }
  .list-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }

  /* 空状态 */
  .empty-state {
    text-align: center;
    padding: 48px 0;
    color: #a6adbb;
  }
  .empty-illustration {
    font-size: 36px;
    color: #ffd666;
  }

  /* 分页 */
  .pagination-wrapper {
    padding: 16px;
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
  }

  /* 响应式 */
  @media (max-width: 1200px) {
    .grid-view {
      grid-template-columns: repeat(3, 1fr);
    }
    .list-item {
      grid-template-columns: 56px 140px 1fr 260px 120px;
    }
  }
  @media (max-width: 992px) {
    .grid-view {
      grid-template-columns: repeat(2, 1fr);
    }
    .list-item {
      grid-template-columns: 48px 120px 1fr 220px 100px;
    }
  }
  @media (max-width: 768px) {
    .ranking-container {
      padding: 0 12px 12px;
    }
    .hero-section {
      height: 180px;
    }
    .grid-view {
      grid-template-columns: 1fr;
    }
    .filter-control-section {
      flex-direction: column;
      align-items: flex-start;
      gap: 10px;
    }
    .list-item {
      grid-template-columns: 44px 1fr;
      grid-auto-rows: auto;
    }
    .list-stats,
    .list-actions {
      justify-content: flex-start;
    }
  }
</style>
